<template>
  <div class="layout-header">
    <div class="header-left"></div>
    <div class="header-right">
      <n-space>
        <n-badge :value="value" :max="99" processing>
          <n-dropdown
            trigger="hover"
            @select="handleSelect"
            :options="options"
            :render-label="renderLabel"
          >
            <n-icon size="20" color="#000">
              <NotificationsOutline />
            </n-icon>
          </n-dropdown>
        </n-badge>
      </n-space>

      <n-space vertical item-style="line-height: 0;">
        <n-space>
          <n-dropdown
            trigger="hover"
            @select="handleSelect"
            :options="avatarOptions"
          >
            <n-avatar>{{ value }}</n-avatar>
          </n-dropdown>
        </n-space>
      </n-space>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, h } from "vue";
import {
  NotificationsOutline,
  CheckmarkCircleOutline,
} from "@vicons/ionicons5";
import { useRouter } from "vue-router";
import { NAvatar, NIcon, NText } from "naive-ui";
let value = ref(100);
const router = useRouter();

let avatarOptions = reactive([
  {
    label: "个人设置",
    key: "iSetting",
  },
  {
    label: "退出登录",
    key: "logout",
  },
]);

function handleSelect(key) {
  console.log(key);
  switch (key) {
    case "logout":
      // window.sessionStorage.setItem("token", response.data.data.token);
      window.sessionStorage.removeItem("token");
      router.push("/login");
      break;

    case "iSetting":
      break;

    default:
      break;
  }
}

// 导航栏通知下拉菜单
//自定义项目参数
function renderCustomNotation() {
  return h(
    "div",
    {
      style: "display: flex; align-items: center; padding: 8px 12px;",
    },
    h("div", null, h(NText, { depth: 2 }, { default: () => "打工仔" }))
  );
}

function renderLabel(option) {
  console.log(option);
  return h(
    "div",
    {
      style: {
        display: "flex",
        alignItems: "center",
      },
    },

    [
      h(NAvatar, {
        src: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
        round: true,
        size: "small",
      }),
      h(
        "div",
        {
          style: {
            marginLeft: "12px",
            padding: "4px 0",
          },
        },
        [
          h("div", null, ['dsadasdas']),
          h(
            NText,
            { depth: 3, tag: "div" },
            {
              default: () => "description",
            }
          ),
        ]
      ),
    ]
  );
}

let options = reactive([
  {
    key: "header",
    type: "render",
    render: renderCustomNotation,
  },
  {
    key: "header-divider",
    type: "divider",
  },
  {
    label: "滨海湾金沙，新加坡",
    key: "marina bay sands",
  },
  {
    label: "布朗酒店，伦敦",
    key: "brown's hotel, london",
  },
  {
    label: "亚特兰蒂斯巴哈马，拿骚",
    key: "atlantis nahamas, nassau",
  },
  {
    type:'render',
    label: "比佛利山庄酒店，洛杉矶",
    render:renderLabel,
  },
]);

value.value = options.length;
</script>

<style scoped>
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: 64px;
  box-shadow: 0 1px 4px #00152914;
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 11;
  border-color: rgb(239, 239, 245);
}

.header-left {
  display: flex;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.n-space {
  /* display: inline-block; */
  margin-right: 30px;
}

.n-dropdown-option{
  height: 80px !important;
}
</style>